<template>
    <div class="sceoll">
       <Content>
           <div class="scroll-detail-container" >
               <h4>{{scrollDetail.title}}</h4>
               <div class="scroll-detail-img">
                   <img :src="scrollDetail.pic" class="img">
               </div>
                <div v-html="scrollDetail.content" class="scroll-detail-jshao"></div>
           </div>
       </Content>
    </div>
</template>

<script>
import Content from "../../components/content/Content";

export default {
    data(){
        return{
           scrollDetail:[],
        }
    },
    components:{Content},
    mounted(){
        // console.log(this.$route.query.id)
        this.$API.getScrollDetail({id:this.$route.query.id})
        .then((res) => {
            console.log(res);
            this.scrollDetail=res.data.data;
        });
    },
}
</script>

<style scoped>
.scroll-detail-container{
  width: 100%;
  margin-top:64px;
  /* background-color: cadetblue; */
}
.scroll-detail-container h4{
    text-align: center;
    height:70px;
    line-height:70px;
}
.scroll-detail-img{
    width:100%;
    height:10rem;
    /* border:1px solid red; */
}
.scroll-detail-img .img{
    height: 10rem;
}
.scroll-detail-jshao{
  width: 100%;
  flex-direction: column;
  display:flex;
  font-size:0.72rem;
  justify-content: start;
}
</style>